<template>
    <div class="app-container">
     <searchForm
       :formOptions="formOptions"
       @onSearch="onSearch"
       @onReset="onReset"
       :formLabelWidth="formLabelWidth"
       v-show="showSearch"
     />
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
           type="primary"
           plain
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
           v-hasPermi="['dailyroutine:delayreturn:add']"
         >新增</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
     <el-table :data="tableData" v-loading="loading" border stripe>
        <el-table-column label="学生姓名" prop="studentName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="注册号" prop="registerCode" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="年级名称" prop="gradeName" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="班级名称" prop="className" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="原计划返校时间" prop="oldDate" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="最新返校时间" prop="newDate" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="延迟返校原因" prop="reason" :show-overflow-tooltip="true" align="center" />
        <el-table-column label="特殊人群标记" prop="flag" :show-overflow-tooltip="true" align="center" >
            <template slot-scope="scope">
                <el-tag v-if="scope.row.flag == '0'" type="success">正常</el-tag>
                <el-tag v-else-if="scope.row.flag == '1'" type="warning">已标记</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime" :show-overflow-tooltip="true" align="center"  />
        <!-- <el-table-column label="操作" align="center" fixed="right" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['dailyroutine:delayreturn:edit']"
                >修改</el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    v-hasPermi="['dailyroutine:delayreturn:remove']"
                >删除</el-button>
            </template>
        </el-table-column> -->
     </el-table>
     <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
     <addOrEditDlg ref="addOrEditDlgRef" @onSearch="getList"></addOrEditDlg>
    </div>
 </template>
 
 <script>
 import searchForm from "@/components/Search/searchForm.vue";
 import addOrEditDlg from "./modules/addOrEditDlg.vue";
 import { 
    delayReturnList,
    delDelayReturn
  } from "@/api/dailyroutine/delayReturn.js";
 export default {
     name:"delayReturn",
     components: { 
        searchForm,
        addOrEditDlg
     },
     data () {
         return{
             formLabelWidth: "90px",
             formOptions: [
                 {
                     label: "学生姓名",
                     prop: "studentName",
                     element: "el-input",
                     placeholder: "请输入学生姓名"
                 },
                 {
                     label: "注册号",
                     prop: "registerCode",
                     element: "el-input",
                     placeholder: "请输入注册号"
                 },
                //  {
                //      label: "特殊人群标记",
                //      prop: "flag",
                //      element: "el-select",
                //      placeholder: "请选择特殊人群标记",
                //      options: [
                //          { label: "正常", value: "0" },
                //          { label: "已标记", value: "1" }
                //      ]
                //  }
             ],
             // 显示搜索条件
             showSearch: true,
             // 查询参数
             queryParams: {
                pageNum: 1,
                pageSize: 10,
                studentName: undefined,
                registerCode: undefined,
                flag: undefined
             },
             tableData: [],
             // 遮罩层
             loading: true,
             total: 0
         }
     },
     computed:{
     
     },
     created(){
         this.getList()
     },
     methods:{
         onSearch(val) {
             // 查询条件和分页数据合并
             this.queryParams = Object.assign(this.queryParams, val);
             this.getList();
         },
          // 重置
         onReset(data) {
             this.queryParams = Object.assign(this.queryParams, data);
             this.getList();
         },
         // 新增
         handleAdd() {
            this.$refs.addOrEditDlgRef.open()
         },
         // 修改
         handleUpdate(row) {
            this.$refs.addOrEditDlgRef.open(row)
         },
         // 删除
         handleDelete(row) {
             const ids = row.id || this.ids;
             this.$modal.confirm('是否确认删除延迟返校登记编号为"' + ids + '"的数据项？').then(() => {
                 return delDelayReturn(ids);
             }).then(() => {
                 this.getList();
                 this.$modal.msgSuccess("删除成功");
             }).catch(() => {});
         },
         getList () {
            this.loading = true;
            delayReturnList(this.queryParams).then((res) => {
                this.tableData = res.rows
                this.loading = false;
                this.total = res.total
            })
         }
     }
 }
 </script>
 
 <style>
 
 </style>